<script setup name="information" lang="ts">
/*========================================>( 模型属性 )<========================================*/
const dialogVisible = ref<boolean>(false)
const tableData = ref<Array<{ attr: string | string[] }>>([])
const loading = ref<boolean>(false)
const searchValue = ref<string>()
/*========================================>( 父传子属性 )<========================================*/
const props = defineProps(['data'])

/*========================================>( 本地属性 )<========================================*/
let _all: any = undefined
let _searchTask: any = undefined

/*========================================>( 普通方法 )<========================================*/
const emits = defineEmits(['cancel'])
//通知父组件关闭子组件
const cancel = () => {
    emits('cancel')
}
/*========================================>( 监听方法 )<========================================*/
//监听搜索
const handleInputChanged = (e: string) => {
    if (_searchTask) {
        clearTimeout(_searchTask)
        _searchTask = undefined
    }
    loading.value = true
    _searchTask = setTimeout(() => {
        tableData.value = []
        if (!e) {
            tableData.value = _all
        }
        _all.forEach((item: { attr: string | string[] }) => {
            if (item.attr.indexOf(e) > -1) {
                tableData.value.push(item)
            }
        })
        _searchTask = undefined
        loading.value = false
    }, 650)
}
/*========================================>( created )<========================================*/
loading.value = true
dialogVisible.value = true
let list1 = [], list2 = []

console.log('props.data', props.data)

for (const attr in props.data) {
    const object = props.data[attr]
    if (/\d/.test(attr)) {
        const attrC = '(' + attr.slice(0, 4) + ',' + attr.slice(4) + ')'
        list1.push({
            attr: attrC,
            ...object
        })
    } else {
        list2.push({
            attr,
            ...object
        })
    }
}
tableData.value = [...list1, ...list2]
_all = [...list1, ...list2]
loading.value = false

</script>
<template>
    <el-dialog class="information" v-model="dialogVisible" width="900" @close="cancel">
        <template #header>
            <span style="color: #fff">图像Tags信息</span>
            <el-input placeholder="请输入检索内容" v-model="searchValue" style="width:400px;margin-left:50px;" clearable
                @input="handleInputChanged">
            </el-input>
        </template>
        <el-table :data="tableData" border style="width: 100%" height="600" v-loading="loading">
            <el-table-column prop="attr" label="名称" />
            <el-table-column prop="vr" label="VR" />
            <el-table-column prop="Value" label="值">
                <template #default="scope">
                    {{ scope.row.Value[0] }}
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancel">关闭</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<style lang="scss"></style>
<style lang="scss">
.el-dialog.information {
    background-color: #4d4d4d;
    position: relative;
    border: solid 1px #666;
    height: 750px;

    .el-dialog__body {
        padding: 0 10px;
    }

    .el-dialog__title {
        color: #fff !important;
        font-size: 15px;
    }

    .el-dialog__header {
        height: 60px;
        padding-bottom: 0;
    }

    .el-dialog__wrapper {
        display: table;
    }



    .el-input {

        .el-input__wrapper {
            background-color: #000;
        }

        .el-input-group__prepend {
            background-color: #000;
            color: #ccc;
        }

        input {
            background-color: #000;
            color: #ccc;
        }

    }

    .el-table {

        background-color: #3d3d3d;

        th {
            color: #FFF;
            background-color: #3d3d3d !important;
        }

        tr {
            color: #000;
            background-color: #fff;
            cursor: pointer;

            &:hover {
                font-weight: bold;
            }
        }
    }

}</style>